<template>
  <div class="item" v-if="storeItem" @click.stop="toDetail">
    <div class="img-box">
      <img :src="storeItem.ti" alt="" />
      <div class="tag">{{ storeItem.tp }}</div>
      <div class="des my-text">{{ storeItem.des }}</div>
    </div>
    <div class="title my-text">{{ storeItem.t }}</div>
    <div class="price">
      <span class="price-p">&yen;{{ storeItem.p }}</span
      ><span class="price-op">&yen;{{ storeItem.op }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["storeItem"],
  methods:{
    toDetail(){
      this.$router.push({
        name:"storedetail",
        params:{
          storeid:this.storeItem.id
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.item {
  width: 1.63rem;
  margin-bottom: 0.2rem;
  .img-box {
    position: relative;
    width: 1.63rem;
    height: 1.93rem;
    border-radius: 0.12rem;
    overflow: hidden;
    .tag {
      position: absolute;
      left: 0.06rem;
      top: 0.06rem;
      padding: 0.01rem 0.04rem;
      background-color: var(--bgc-yellow);
      border-radius: 0.04rem;
    }
    .des {
      height: 0.3rem;
      width: 100%;
      box-sizing: border-box;
      padding: 0 0.1rem;
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: var(--bgc-gray);
      font-size: 0.12rem;
      color: var(--text-gray);
      line-height: 0.3rem;
    }
  }
  .title {
    font-size: 0.15rem;
    line-height: 0.2rem;
    color: var(--text-black);
    box-sizing: border-box;
    width: 100%;
    height: 0.5rem;
    padding: 0.1rem 0;
    -webkit-line-clamp: 2;
  }
  .price {
    width: 100%;
    display: flex;
    align-items: flex-end;
    color: var(--text-gray2);
    font-size: 0.12rem;
    .price-p {
      font-size: 0.16rem;
      color: var(--text-red);
      margin-right: 0.05rem;
    }
    .price-op {
      text-decoration: line-through;
    }
  }
}
</style>